let vm = new Vue({
    el: '#app',
    delimiters:['[[',']]'],
    data:{
    //    v-model
        username :'',
        password:'',
        password2:'',
        mobile:'',
        allow:'',
        image_code_url:'',
        //将csrf_token付给uuid
        uuid:csrf_token,
        image_code:'',
        sms_code_tip:'获取短信验证码',
        send_Flag:false,
        sms_code:'',
        error_sms_code_message:'',



//v-show
        error_sms_code:false,
        error_image_code:false,
        error_name:false,
        error_password:false,
        error_password2:false,
        error_mobile:false,
        error_allow:false,
//error_message
        error_name_message:'',
        error_mobile_message:'',
        error_image_code_message: ''

    },
    mounted(){
        this.generate_image_code();
    },

    methods:{ // 定义和实现事件方法
        //sms_codes/(?P<mobile>1[3-9]\d{9})
        get_sms_code() {

            this.check_image_code();
            this.check_mobile();
            if (this.error_image_code == true || this.error_mobile == true){
                this.send_Flag = true;
                return;
            }
            if (this.send_Flag == true){
                return;
            }
            this.send_Flag = true;

            let url = '/sms_codes/' + this.mobile + '/';

            axios.get(url, {
                responseType: 'json',
                params:{
                    image_code: this.image_code,
                    uuid: this.uuid
            }
            })
                    .then(response => {
                        if(response.data.code === "0" ){
                            let num = 60;
                            let t = setInterval(() =>{
                                if (num === 1){
                                    clearInterval(t);
                                    this.sms_code_tip = "获取短信验证码";
                                    this.generate_image_code();
                                    this.send_Flag = false;
                                }else {
                                    num -= 1;
                                    this.sms_code_tip = num + '秒';

                                }
                            },1000)
                        }else {
                            if (response.data.code == '4001'){
                                this.error_image_code_message = response.data.errmsg;
                                this.error_image_code = true;
                            }else if (response.data.code == '4002'){
                                this.error_image_code_message = response.data.errmsg;
                                this.error_image_code = true;
                            } else {
                                console.log(response.data)
                            }
                            this.send_Flag = false;
                        }
                    })
                    .catch(err => {
                        console.log(err.response)
                        this.send_Flag = false;
                    })



        },

        generate_image_code(){
            let url = '/image_code/' + this.uuid + '/';
                axios.get(url, {
                    content_type: 'img/jpg',
            })
                    .then(response => {
                    // response.data 是经过 base64 编码的验证码图片数据
                    // 前面再加上 "data:image/jpeg;base64," , 表示一个 Data URI
                            this.image_code_url = "data:image/jpeg;base64," + response.data;
                    })
                    .catch(err => {
                    // 请求异常的回调函数的函数体
                        console.log(err);
                    })
    },
        //代码封装，实现复用
        // generate_image_code(){
        //
        //     // this.image_code_url = '/image_code/' +this.uuid + Math.ceil(Math.random(10000)*10) +'/';
        // },

        // 校验用户名
        check_username(){

            let re =/^[a-zA-Z0-9_-]{5,20}$/;
            this.error_name = !re.test(this.username);
            this.error_name_message = this.error_name ? '请输入5-20个字符的用户名':'';

            if (this.error_name == false){
                let url = '/usernames/'+ this.username + '/count/';
                axios.get(url,{
                })
                    .then( response => {
                        if (response.data.count == 1) {
                            this.error_name_message = '用户名重复';
                            this.error_name = true;
                        }else {
                            this.error_name = false;
                        }
                    })
                    .catch(error => {
                        console.log(error.response);
                    })
            }
        },
        // 校验密码
        check_password(){
            let re = /^[0-9A-Za-z]{8,20}$/;
            this.error_password = !re.test(this.password);
        },
        // 校验确认密码
        check_password2(){
            this.error_password2 = !(this.password === this.password2);

        },
        check_image_code(){

            // this.error_image_code = !re.test(this.image_code);
            // this.error_check_image_code = this.error_image_code ? '验证码有误':'';

            if(this.image_code.length == 4){
                this.error_image_code=false;
            }else {
                this.error_image_code_message ='验证码长度有误';
                this.error_image_code=true;
            }
        },
        // 校验手机号
        check_mobile() {
            let re = /^1[3-9]\d{9}$/;
            this.error_mobile = !re.test(this.mobile);
            //
            this.error_mobile_message = this.error_mobile ? '您输入的手机号码格式不正确' : '';

            if (this.error_mobile == false){
                let url = '/userphone/'+ this.mobile + '/count/';
                axios.get(url,{

                })
                    .then(response => {
                        if (response.data.count == 1){
                            this.error_mobile_message = '电话号码重复';
                            this.error_mobile =true;
                        }else {
                            this.error_mobile =false;
                        }

                    })
                    .catch(error => {
                        this.error_mobile =false;
                    })
                }
                },
        check_msg_code(){
            let re = /^\d{6}$/;
            this.error_sms_code = !re.test(this.sms_code);
            this.error_sms_code_message = this.error_sms_code ? '验证码长度不符合':'';

            // if ()


        },


        // 校验是否勾选协议
        check_allow(){
            this.error_allow = !this.allow;

        },
        // 监听表单提交事件
        on_submit(){
            this.check_username();
            this.check_password();
            this.check_password2();
            this.check_mobile();
            this.check_allow();
            this.check_msg_code();


            if (this.error_name === true || this.error_password === true || this.error_password2 === true || this.error_mobile === true || this.error_mobile === true|| this.error_allow === true){
                // 禁用表单的提交
                window.event.returnValue = false;
            }
        },
    }
})